<template>
  <div>
    <div>
      <el-form :inline="true" >
        <el-form-item >
          <el-input
            placeholder="请输入保险名称"
            v-model="queryObj.query_value">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="getMainListReset" ><i class="iconfont icon-search"></i>查询</el-button>
          <el-button type="primary" size="medium" @click="goto('')"><i class="iconfont icon-plus"></i>添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        stripe
      >
        <el-table-column
          label="ID"
          prop="insurance_id"
          width="50">
        </el-table-column>
        <el-table-column
          prop="insurance_name"
          label="保险类型"
        >
        </el-table-column>
        <el-table-column
          label="保险价格"
        >
          <template slot-scope="scope">
            <span>{{scope.row.insurance_price | yuantofen}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="goto(scope.row)"><i class="iconfont icon-edit"></i>编辑</el-button>
            <el-button type="text" @click="del(scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total">
      </el-pagination>
    </div>

    <!-- // 添加编辑 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="保险名称"  prop="insurance_name">
          <el-input placeholder="请输入" v-model="form.insurance_name" ></el-input>
        </el-form-item>
        <el-form-item label="保险单价"  prop="insurance_price">
          <el-input placeholder="请输入" v-model="form.insurance_price" ></el-input>
        </el-form-item>
        <el-form-item label="保险简介"  prop="insurance_price">
          <el-input placeholder="请输入" v-model="form.insurance_summary" ></el-input>
        </el-form-item>
        <el-form-item label="保险说明"  prop="remark">
          <el-input type="textarea" placeholder="请输入" :rows="4" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInsuranceList,
  addOrModifyInsurance,
  deleteInsurance, } from 'api/lineManagement/lineGlobalSettingAPI'
import config from 'api/config'
import { pageSizeArr } from 'common/config/constConfig'
import { checkNumber } from 'common/js/formValidity'
import { yuantofen } from 'common/js/util'

export default {
  computed: {
    dialogTitle(){
      if(this.dialogMode === 'add'){
        return '添加保险'
      }else{
        return '编辑保险'
      }
    }
  },
  filters: {
    yuantofen
  },
  data() {
    return {
      dialogMode: 'add',
      dialogFormVisible: false,
      form: {},
      pageSizeArr,
      queryObj: {},
      rules: {
        insurance_name: [
          { required: true, message: '请输入保险名', trigger: 'blur' }
        ],
        insurance_price: [
          { required: true, message: '请输入保险单价', trigger: 'blur' },
          { validator: checkNumber, trigger: 'blur' }
        ],
        insurance_summary: [
          { required: true, message: '请输入保险说明', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入保险说明', trigger: 'blur' }
        ]
      },
      imgUrl: config.imgUrl,
      mainList: [],
      page: {
        total: 0,
        page: 1,
        limit: 10
      }
    }
  },
  methods: {
    goto(row) {
      this.form = {}
      this.dialogMode = 'add'
      this.dialogFormVisible = true
      if(row) {
        this.form = {...row}
        this.dialogMode = 'edit'
      }
    },
    doAction() {
      let data = {...this.form}
      data.insurance_price = data.insurance_price * 100
      addOrModifyInsurance(data).then(() => {
        this._caozuoAfter('操作成功')
      })
    },
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._del(row)
      })
    },
    _del(row){
      deleteInsurance(row.insurance_id).then(res => {
        this._caozuoAfter(res.rMsg)
      })
    },
    _caozuoAfter(msg){
      this.dialogFormVisible = false
      this.$message({
        message: msg,
        type: 'success'
      })
      this._mainList()
    },
    getMainListReset(){
      this.page.page = 1
      this._mainList()
    },
    // 获取
    _mainList(){
      let data = {...this.queryObj}
      data.pageInfo = {...this.page}
      getInsuranceList(data).then(res => {
        let pageInfo = res.pageInfo
        this.page.total = pageInfo.Total
        this.page.page = pageInfo.page
        this.mainList = res.rData
      })
    },
  },
  created(){
    this._mainList()
  }
}
</script>

<style lang="scss" scoped>

</style>
